<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
		<script type="text/javascript">
			function delA(){
					
					//这里我们点击哪个超链接以后需要删除超链接所在的行
					//这里我们点击的那个超链接就是this
					//获取当前tr
					var tr = this.parentNode.parentNode;
					
					
					var name = tr.getElementsByTagName("td")[0].innerHTML;
					/*
					 * confirm()用于弹出一个带有确认和取消的按钮的提示框
					 * 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
					 * 如果用户确认则会返回true，如果取消则会返回false
					 */
					
					
					/*
					 * var flag = confirm("确认删除吗？");
					if(flag){
						tr.parentNode.removeChild(tr);
						}
						*/
					if(confirm("确认删除"+name+"吗？")){
					//删除tr
					tr.parentNode.removeChild(tr);
					}
					
					/*点击超链接以后，超链接会跳转页面，这个是超链接的默认行为
					 但是此时我们不希望出现默认行为，可以通过在相应函数的最后加return false来取消默认行为*/
					
					return false;
					};
			window.onload = function(){
				/*
				 点击超链接以后，删除一个员工的信息
				 * */
				//获取所有的超链接
				var allA = document.getElementsByTagName("a");
				//为每个超链接绑定一个单机响应函数
				for(var i=0;i<allA.length;i++){
					allA[i].onclick =delA; 
				
				}
				
				/*
				 * 添加员工的功能
				 *   -点击按钮以后，将员工的信息添加到表格中
				 */
				
				//为提交按钮绑定一个单机响应函数
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function(){
					//获取用户添加的员工信息
					//获取员工的名字
					var name = document.getElementById("empName").value;
					var email = document.getElementById("empName").value;
					var salary = document.getElementById("empName").value;
					//alert(name);
					
					/*
				<tr>
					<td>Tom</td>
					<td>tom@tom.com</td>
					<td>5000</td>
					<td><a href="javascript:;">Delete</a></td>
				</tr>
					 */
				//创建tr
				var tr = document.createElement("tr");
				var nameTd = document.createElement("td");
				var emailTd = document.createElement("td");
				var salaryTd = document.createElement("td");
				var aTd = document.createElement("td");
				
				//创建a
				var a = document.createElement("a");
				
				//创建文本节点
				var nameText = document.createTextNode(name);
				var emailText = document.createTextNode(email);
				var salaryText = document.createTextNode(salary);
				var delText = document.createTextNode("Delete");
				
				//将文本添加到td中
				nameTd.appendChild(nameText);
				emailTd.appendChild(emailText);
				salaryTd.appendChild(salaryText);
				
				a.appendChild(delText);
				aTd.appendChild(a);
				
				//将td添加到tr中
				tr.appendChild(nameTd);
				tr.appendChild(emailTd);
				tr.appendChild(salaryTd);
				tr.appendChild(aTd);
				
				//向a中添加href属性
				a.href = "javascript:;";
				
				//为a绑定单机响应函数
				a.onclick = delA;
				
				//获取table
				var employeeTable = document.getElementById("employeeTable");
				
				//获取tbody
				var tbody = employeeTable.getElementsByTagName("tbody")[0];
				//将tr添加到table中
				tbody.appendChild(tr);
				
				
				
				};
				
			};
		</script>
	</head>
	<body>
		<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="  " />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" >
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

	</body>
</html>
